<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap卡片上</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main {
        margin: 10%;
    }
    .list-group-item:hover{
        background-color: aquamarine;
    }
</style>

<body>

    <main>
        <div class="row">
            <div class="col-sm-6">
                <div class="card">
                    <img src="../img/back.jpg" alt="top" class="card-img-top">
                    <div class="card-body">
                         <h3 class="card-title">标题</h3>
                         <h5 class="card-subtitle text-muted m-1">小标题</h5>
                         <p class="card-text">卡片内容....</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <dev class="card text-center">
                    <div class="card-header text-left">列表头</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">列表1</li>
                        <li class="list-group-item">列表2</li>
                        <li class="list-group-item">列表3</li>
                    </ul>
                    <div class="card-footer text-right">列表尾</div>
                </dev>
            </div>
        </div>
       <div class="card w-50">
           <img src="../img/back.jpg" alt="top" class="card-img-top">
           <div class="card-body">
                <h3 class="card-title">标题</h3>
                <h5 class="card-subtitle text-muted m-1">小标题</h5>
                <p class="card-text">卡片内容....</p>
           </div>
       </div>

       <dev class="card w-50">
           <div class="card-header">列表头</div>
           <ul class="list-group list-group-flush">
               <li class="list-group-item">列表1</li>
               <li class="list-group-item">列表2</li>
               <li class="list-group-item">列表3</li>
           </ul>
           <div class="card-footer">列表尾</div>
       </dev>


    </main>


    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
</body>

</html>